<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是第五节课</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px red solid;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
		</div>
	</body>

	<script>
		window.onload = function() {
			let yCanvas = document.getElementById('canvas');

			console.dir(yCanvas);

			let yPen = yCanvas.getContext("2d");


			let str = "Hello World!  欢迎来到我的世界！";

			yPen.font = "italic 900 40px 小篆";//normal 默认  italic斜体  oblque 斜体

			yPen.strokeStyle = "aqua";//填充模式的颜色
			


			yPen.strokeText(str, 100, 40,300);//显示文字的 X轴，Y轴坐标，最大宽度，单位是px
			yPen.fillstyle ="pink";
			yPen.fillText(str,100, 40,300);// 填充

			console.dir(yPen.measureText(str));

			// alert(yPen.measureText(str).width);

			//part2

			// myText(yPen, "我要居中", "center")

			// function myText(yPen, str, type) {
			// 	yPen.strokeStyle = "auqa";
			// 	yPen.font = "italic 900 40px 小篆";
			// 	let textWidth = yPen.measureText(str).width;
			// 	if (type === "center") {
			// 		//居中
			// 		let x = (500 - textWidth) / 2.0;
			// 		yPen.strokeText(str, x, 40);
			// 	}
			// }

			//part 3
			// myText(yPen, "我要居右", "right")

			// function myText(yPen, str, type) {
			// 	yPen.strokeStyle = "auqa";
			// 	yPen.font = "italic 900 40px 小篆";
			// 	let textWidth = yPen.measureText(str).width;
			// 	let x = 0;
			// 	if (type === "center") {
			// 		//居中
			// 		x = (500 - textWidth) / 2.0;
			// 	} else if (type === "left") {
			// 		x = 0;
			// 	} else {
			// 		x = 500 - textWidth;
			// 	}
			// 	yPen.strokeText(str, x - 10, 40);
			// }

			//part 3
			//text-align
			//align_left


		}
	</script>
</html>
